<?php mySkyn::assetJS("/admin/core.js");
mySkyn::assetJS("/admin/js/MOVIC/grid.js");
mySkyn::assetCSS("/admin/css/MOVIC/grid.css");
//mySkyn::assetJS("/admin/more.js");
?>
<style type="text/css">

.row_selected{
	background-color:red;
}

/*Links*/
#header_links h2{
	display:inline;
	margin:2px;
	padding:5px;
	color:#333;
	cursor:pointer
}
#header_links h2.selected{ color:#123abc;}
</style>
<div id="header_links">
	<h2 id="btn_verduras">Verduras</h2><h2 id="btn_frutas">Frutas</h2><h2 id="btn_condimentos">Condimentos</h2>
</div>
<div class="t_table" id="data_grid">
	<!--<div class="t_row row-1">
		<div>Nombre</div>
		<div>Titulo</div>
		<div>Descripcion</div>
		<div>Quarentena</div>
	</div>-->
</div>
<style type="text/css">
	div#opciones
	{
		width:200px;
		height:100px;
		position:absolute;
		top:10px;
		left:5px;
		border:1px solid green;
		display:block
	}
	div#opciones > button
	{
		line-height: 10px;
		padding: 0;
		position: absolute;
		right: 0;
		top: 0;
	}
	.ocultar{
		display:none!important;
		background-color:red;
	}
	#display_{
		background-color:rgba(0,0,0,0.4);
		height: 100%;
		left: 0;
		position: fixed;
		top: 0;
		width: 100%;
		overflow:auto;
	}
	#popup{
		background-color: #FCFCFC;
		display: inline-block;
		margin: auto;
		min-width: 100px;
		padding: 10px;
		box-shadow: 5px 5px 5px #CCCCCC;
		border-radius:7px;
	}
	#data_grid .updated
	{
		background-color:#DDE8F9
	}
</style>
<div id="display_" class="ocultar">
	<div style="display: block; position: relative; text-align: center;">
		<div id="popup" style="width:450px;">
		</div>
	</div>
</div>
<script type="text/javascript">
var ALIMENTOS = {
	ROW_SELECTED:null,
	URL : null,
	success:function(data){
		if(data.header && data.data)
		{
			Listas.setHeader(data.header);
			Listas.setData(data.data);
			Listas.render();
		}
		else
		{
			Listas.setData(datos);
			Listas.render();
		}
	},
	complete:function()
	{
	
	}
};
/*var header = ['id','nombre','minerales','vitaminas','proteinas','calorias'];
var datos = [
	{id:1,nombre:"juan",titulo:"pedro",descripcion:"jeeje"},
	{id:2,nombre:"asdsad",titulo:"pedro",descripcion:"jeeje"}
]/**/
var Listas = new MOVIC.grid('data_grid');
//Listas.setHeader(header);
//Listas.setData(datos);

//Listas.render();
var verdurasJSON = new Request.JSON({
	url: '<?=BASE_URL_FULL?>/admin/alimentos.php/listar:verdurasJSON', 
	onSuccess: ALIMENTOS.success,
	onComplete:ALIMENTOS.complete
});
$('btn_verduras').addEvent('click',function(){
	verdurasJSON.send();
	ALIMENTOS.URL = '<?=BASE_URL_FULL?>/admin/alimentos.php/formulario:verduras';
})
var frutasJSON = new Request.JSON({
	url: '<?=BASE_URL_FULL?>/admin/alimentos.php/listar:frutasJSON', 
	onSuccess: ALIMENTOS.success,
	onComplete:ALIMENTOS.complete
});
$('btn_frutas').addEvent('click',function(){
	frutasJSON.send();
	ALIMENTOS.URL = '<?=BASE_URL_FULL?>/admin/alimentos.php/formulario:frutas';
})
var condimentosJSON = new Request.JSON({
	url: '<?=BASE_URL_FULL?>/admin/alimentos.php/listar:condimentosJSON', 
	onSuccess: ALIMENTOS.success,
	onComplete:ALIMENTOS.complete,
	onError:function(){ alert('Ubo un error y no se podra procesar su peticion')}
});
$('btn_condimentos').addEvent('click',function(){
	condimentosJSON.send();
	ALIMENTOS.URL = '<?=BASE_URL_FULL?>/admin/alimentos.php/formulario:condimentos';
})

$('data_grid').addEvent('click:relay(div.t_row)', function(event, target){
    event.preventDefault();

	id = target.getProperty('data-id');
	ALIMENTOS.ROW_SELECTED = target;
	target.addClass('row_selected');

	$('display_').removeClass('ocultar');
	id = Listas.getId(id);

	$('popup').load(ALIMENTOS.URL + '/' +id);

});

$('display_').addEvent('click',function(){
	$('display_').addClass('ocultar');
	$('popup').empty();
	$(document.body).removeProperty('style');
	if(ALIMENTOS.ROW_SELECTED)
	{
		ALIMENTOS.ROW_SELECTED.removeClass('row_selected');
	}
});
$('popup').set('load', {evalScripts: true});
$('popup').addEvent('click',function(evt){
	evt.stopPropagation();
})
$('popup').addEvent('focus:relay(form input,form textarea)', function(event, target){
	//console.log($('popup').getElements('form table td'));
	Array.each($('popup').getElements('form table td'),function(td){
		td.addClass('td_no_focus');
	});/**/
	target.getParent().removeClass('td_no_focus');
	if(target.get('tag') == 'textarea')
	{

		target.addClass('morph');
		target.removeProperty('style');
		$('popup').getElement('label[for='+ target.get('id') +']').addClass('morph');
	}
});
$('popup').addEvent('blur:relay(form input,form textarea)', function(event, target){
	Array.each($('popup').getElements('form table td'),function(td){
		td.removeClass('td_no_focus');
	});
	if(target.get('tag') == 'textarea')
	{
		target.removeClass('morph');
		$('popup').getElement('label[for='+ target.get('id') +']').removeClass('morph');
	}
});
/*Links header*/
$('header_links').addEvent('click:relay(h2)',function(event , target){
	Array.each($$('#header_links h2'),function(	item){
		item.removeClass('selected');
		item.removeProperty('style');
	});
	target.addClass('selected');
});/**/
// Morphing the list with CSS selectors
 $$('#header_links h2').each(function(el){
    el.set('morph', {
      duration: 200
    }).addEvents({
      // Using Function:pass, which is a shorter alternative for
      //     function(){
      //         el.morph('.hover');
      //     }
      mouseenter: el.morph.pass('#header_links h2.selected', el),
      mouseleave: function()
	  {
		if(!el.hasClass('selected'))
		{	
			el.morph('#header_links h2');
		}
	  }
    });
  });
/*Form send input*/
$('popup').addEvent('submit:relay(form)',function(evt,target){

	var form = $('popup').getElement('form');
	new Request.HTML({update : $('popup'),url:form.get('action'),
		onSuccess:function(a){
		//$('popup').set('html',a);
		//ALIMENTOS.ROW_SELECTED.addClass('updated');
		}
	}).post(form);

	evt.stop();
})

</script>